<%--
  Created by IntelliJ IDEA.
  User: 13478
  Date: 2024/11/20
  Time: 下午1:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link rel="stylesheet" href="static/css/product.css">
    <script src="static/vue-2.6.10.js"></script>
    <script src="static/axios.min.js"></script>
</head>
<style>
    .two{

        height: 270px;
        width: 100%;

    }
    a{
        text-decoration:none;
    }

    .product-info{
        font-size:28px;
    }


    table{
        float: right;
        width: 1100px;

    }


    .nav li {
        text-align: center;
        width: 133px;
        display: inline-block;
        font-size:20px;


    }

    .two img{
        width: 100%;
        height: 150px;
    }



    p{
        position: relative;

    }


    .six{
        float: right;
        height: 2500px;
        width: 70%;
    }

.p1{
    float: left;

}
.p2 img{
    height: 300px;
    width: 400px;
}
.p3 img{
    height: 300px;
    width: 400px;
}
</style>
<body>




<div class="six">
    <div class="product-list" id="app">
        <div class="one"> <img src="fg_right03.jpg"  ></div><br>
        <table width="900" height="500" border="2">
            <tr class="product-item" v-for="product in product_list ">
                <td class="product-img">
                    <img :src="imagesUrl(product.picture)" alt="" >
                </td>
                <td class="product-info" >
                    <div>品名：<span>{{product.name}}</span></div>
                    <div>原价：<span>{{product.market_price}}</span></div>
                    <div>现价：<span>{{product.sell_price}}</span></div>
                    <div>简介：<span>{{product.description}}</span></div>
                    <div><a :href="product_info(product.id)">查看详细内容</a></div>
                </td>
            </tr>
        </table>

    </div>
</div>
<div class="p1">
<div class="p2">
    <img src="fg_left00.jpg">

</div>
<div class="p3">
    <img src="fg_left01.jpg">
</div>
</div>


<script>
    let vue =new Vue({
        el:'#app',
        data:{

            product_list:[],
            product:{
                "name":"猪猪"
            }
        },
        created(){
            //异部请求
            axios.get("productList.do").then(function(result){
                //使用获取到的数据替换商品列表
                vue.product_list = result.data
            });
        },
        methods:{
            imagesUrl: function(img_name){
                return "static/img/productImages/"+img_name;
            },
            product_info:function(id){
                return 'productInfo.do?id='+id;
            }
        }
    });
</script>

</body>
</html>